<template>
  <div id="greatstock" class="rock-ref rockstock" data="3">
    <header-top :option="headerOption"></header-top>
    <router-view></router-view>
    <bottom-bar :data-list="bottomList" :on-selected="onBottomSelected" ref="bottombar"></bottom-bar>
  </div>
</template>

<script>
  import Constant from 'common/constant'
  import LocalDAO from 'common/localDAO'
  import HeaderTop from 'components/HeaderTop'
  import BottomBar from 'components/BottomBar'
  import BestStockBox from 'components/greatstock/BestStockBox'

  export default {
    name: 'GreatStock',
    data () {
      return {
        headerOption: {
          title: '牛股',
          leftBtn: Constant.leftBtn.CLOSE,
          operations: [Constant.operation.SEARCH],
          page:Constant.menu.ROCKMAN
        },
        bottomList:[{
          id:1,
          text:'最牛牛股'
        },{
          id:2,
          text:'最牛组合'
        }]
      }
    },
    components: {
      'header-top': HeaderTop,
      'best-stock-box': BestStockBox,
      'bottom-bar': BottomBar
    },
    methods:{
      onBottomSelected(item,index){
        if (item.id === 1) {
          this.$router.replace({path: '/greatstock/beststockbox'})
        }
        if (item.id === 2) {
          this.$router.replace({path: '/greatstock/bestgroupbox'})
        }
      }
    },
    mounted(){
      if(this.$route.path.indexOf('bestgroupbox')>0){
        this.$refs.bottombar.select(1);
      }
    }
  }
</script>


<style scoped>

</style>
